<template>

  <div>
    <br />
    <myheader/>

    <div class="container">

      <div class="item_column">
          <div class="left">   
              
          </div>

          <div class="right"> 
              
              <br />
              <br />

              <div>
                <van-row>
                  
                  <van-row>
                    
      
                    <van-col>
                      <h1>查看我的公告</h1>
                      <van-button @click="tianjia" style="width: 100px;background-color: aqua;border: 1px">+  新增</van-button>
                      <div>                      <table cellspacing="0" cellpadding="0" border="1" style="border-color: gray;text-align: center" width="1500px" height="250px">
                        <tr>
                          <td>序号</td>
                          <td>标题</td>
                          <td>消息类型</td>
                          <td>发布人</td>
                          <td>优先级</td>
                          <td>通告对象</td>
                          <td>状态</td>
                          <td>执行人</td>
                          <td>发布时间</td>
                          <td>操作</td>
                        </tr>
                        <tr v-for="i in messagelist" :key="i">
                          <td>{{i.id}}</td>
                          <td>{{i.title}}</td>
                    
                          <td v-if="i.type==1">通知公告</td>
                          <td v-else>系统消息</td>
                    
                          <td>{{i.username}}</td>
                    
                          <td v-if="i.priority==1">低</td>
                          <td v-else-if="i.priority==2">中</td>
                          <td v-else>高</td>
                    
                    
                          <td v-if="i.designate==1">指定用户</td>
                          <td v-else>全体用户</td>
                    
                    
                          <td v-if="i.status==1">正常</td>
                          <td v-else>异常</td>
                    
                    
                          <td>{{i.userlist}}</td>
                          <td>{{i.stime}}</td>
                          <td>操作</td>
                        </tr>
                      </table>
                    </div>
            
                      <el-dialog v-model="outerVisible" title="新增" width="60%">
                            <h1>发布通知</h1>
            
                            <van-row>
                              <van-col>
                                <div>
                                  <el-form>
                                    <el-form-item label="标题" style="padding-left: 30px">
                                      <el-input placeholder="请输入标题" v-model="form.title" style="width: 400px;"/>
                                    </el-form-item>
            
                                    <el-form-item label="开始时间">
                                      <el-date-picker v-model="form.stime" type="date" placeholder="请选择开始时间"  style="width: 400px;"  value-format="YYYY-MM-DD">
                                      </el-date-picker>
            
                                    </el-form-item>
            
            
                                    <el-form-item label="优先级" style="padding-left: 15px">
                                      <el-select v-model="form.priority" placeholder="请选择优先级"  style="width: 400px;">
                                        <el-option label="低" value="1"></el-option>
                                        <el-option label="中" value="2"></el-option>
                                        <el-option label="高" value="3"></el-option>
                                      </el-select>
                                    </el-form-item>
            
            
                                    <el-form-item label="指定用户" v-if="form.designate==1">
                                      <el-input placeholder="请选择用户" v-model="form.userlist" style="width: 400px;" @click="userlists"/>
                                    </el-form-item>
                                    <el-form-item v-else>
            
                                    </el-form-item>
            
            
            
            
                                  </el-form>
            
            
            
            
            
            
                                </div>
                              </van-col>
            
                              <van-col>
                                <div style="padding-left: 100px">
                                  <el-form>
                                    <el-form-item label="消息类型">
                                      <el-select v-model="form.type" placeholder="请选择消息类型" style="width: 400px">
                                        <el-option label="通知公告" value="1"></el-option>
                                        <el-option label="系统消息" value="2"></el-option>
                                      </el-select>
                                    </el-form-item>
            
                                    <el-form-item label="结束时间">
                                      <el-date-picker v-model="form.etime" type="date" placeholder="请选择结束时间" style="width: 400px" value-format="YYYY-MM-DD">
                                      </el-date-picker>
            
                                    </el-form-item>
            
            
                                    <el-form-item label="通告类型">
                                      <el-select v-model="form.designate" placeholder="请选择通告类型" style="width: 400px">
                                        <el-option label="指定用户" value="1"></el-option>
                                        <el-option label="全体用户" value="2"></el-option>
                                      </el-select>
                                    </el-form-item>
                                  </el-form>
            
                                </div>
            
            
                              </van-col>
            
                            </van-row>
                            <div>
                              <el-form>
                                <el-form-item label="内容" style="padding-left: 25px">
                                  <el-input
                                      v-model="form.content"
                                      :rows="10"
                                      type="textarea"
                                      placeholder="Please input"
                                  />
                                </el-form-item>
                              </el-form>
                              <el-button type="text" @click="exit" style="margin-left: 1000px" class="exit">关闭</el-button>
                              <el-button type="text" @click="add" style="margin-left: 1050px;" >确定</el-button>
                            </div>
            
            <!--            {{form}}-->
            
                      </el-dialog>
            
            
                      <el-dialog v-model="userslist" title="请选择指定用户" width="60%">
            
            
            
            
                        <el-table
                            ref="multipleTable"
                            :data="user"
                            style="width: 100%"
                            @selection-change="handleSelectionChange"
                        >
                          <el-table-column type="selection" width="55" />
                          <el-table-column
                              property="id"
                              label="编号"
                              width="150"
                          ></el-table-column>
                          <el-table-column
                              property="username"
                              label="用户名"
                              width="200"
                          ></el-table-column>
                          <el-table-column
                              property="password"
                              label="密码"
                              width="200"
                          ></el-table-column>
                          <el-table-column
                              property="create_time"
                              label="创建时间"
                              width="200"
                          ></el-table-column>
                          <el-table-column
                              property="name"
                              label="部门"
                              width="200"
                          ></el-table-column>
                          <el-table-column
                              property="status"
                              label="状态"
                              width="200"
                          ></el-table-column>
            
                        </el-table>
            
                        <el-button type="text" @click="exit1" style="margin-left: 1000px" class="exit">关闭</el-button>
                        <el-button type="text" @click="exit1" style="margin-left: 1050px;" >确定</el-button>
            
                      </el-dialog>
            
            <!--        {{form.username}}-->
                      {{form}}
            
            
                    </van-col>
                  </van-row>
            
                </van-row>
              </div>
              
          </div>
        </div>
    </div>
</div>
</template>

<script>
import myheader from './myheader.vue'
import maxios from '../http/axios'
export default {
  components: {
        'myheader':myheader,
        
    },
  data() {
    return {
      outerVisible:false,
      form:{'priority':'','title':'','stime':'','type':'','etime':'','designate':'','content':'','userlist':[]},
      //选中的指定用户

      //获取用户信息列表
      user:[],
      //弹出层 弹出所有用户
      userslist:false,
      messagelist:[]
    }
  },


  methods: {

    // 将选中用户存在列表中
    handleSelectionChange(val) {
      let arr = []
      for (let i=0;i<val.length;i++){
          if(arr.indexOf(val[i].username,-1)){
            arr.push(val[i].username)
          }
      }
      this.form.userlist = arr


      // console.log(val)
      //
      // console.log(this.username)

    },
    //关闭选中用户的弹窗
    exit1(){
      this.userslist = false
    },
    // 获取用户
    userlists(){
      maxios('/userlist','get')
      .then(res=>{
        //弹出层
        this.userslist = true
        this.user = res.data.list
        console.log(res.data.list)
      })
    },

    //  添加按钮
    add(){
      if(this.form.designate==2){
        this.form.userlist = []
      }
      maxios('/post_Message','post',this.form)
      .then(res=>{
          if(res.data.code==200){
            this.get_message()
            this.$toast.success(res.data.msg)
          }else{
            this.$toast.success(res.data.msg)
          }
        console.log(res)
      })
    },

    get_message(){
      maxios('/post_Message','get',{'userid':localStorage.getItem('uid')})
          .then(res=>{
            this.messagelist = res.list

          })
    },


    //新增按钮
    tianjia(){
      this.outerVisible = true
    },
    //关闭弹出框
    exit(){
      this.outerVisible = false
    },

  },

  mounted() {
    this.get_message()
  },

  
}
</script>

<style scoped>
.exit{
  position: relative;
  top: 40px;
}
</style>